<template>
  <div class="body ">
    <el-row class="box-card">
      <el-col :span="2"
        ><div class="grid-content bg-black">
          <el-image
            style="width: 50px; height: 30px; padding: 20px;border-radius: 20px;"
            :src="url"
          ></el-image>

          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            active-text-color="#32CD32"
            background-color="#000000"
            :collapse="isCollapse"
          >
            <el-menu-item index="1">
              <i font-size:20px class="el-icon-chat-dot-round"></i>
              <span slot="title">聊天</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i font-size:20px class="el-icon-s-custom"></i>
              <span slot="title">好友</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i font-size:20px class="el-icon-orange"></i>
              <span slot="title">动态圈</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <div style="padding-top:20px;padding-left:10px;padding-right:10px;">
            <el-input
              placeholder="搜索"
              v-model="search"
              prefix-icon="el-icon-search"
              clearable
              maxlength="20"
            />
          </div>
          <div style="padding:10px;display: flex;">
            <!-- 聊天栏 -->
            <el-avatar shape="square" :size="40" :src="circleUrl" />
            <div style="padding-left:10px;font-size: 14px;font-weight:bold;">
              vue开发交流群
              <span style="padding-left:30px;float:right;font-size:10px;font-weight:lighter;">下午 17:36</span>
              <div style="font-size:10px;font-weight:lighter;">
                开发者1：vue挺好玩的
              </div>
            </div>
          </div>
          <div style="padding:10px;display: flex;">
            <!-- 聊天栏 -->
            <el-avatar shape="square" :size="40" :src="netUrl" />
            <div style="padding-left:10px;font-size: 14px;font-weight:bold;">
              .net开发交流群
              <span style="padding-left:40px;float:right;font-size:10px;font-weight:lighter;">昨天</span>
              <div style="font-size:10px;font-weight:lighter;">
                宋：.net高薪
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>
<script>
import "element-ui/lib/theme-chalk/display.css";
import circlepng from "../assets/logo.png";
export default {
  data() {
    return {
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      isCollapse: true,
      search: "",
      circleUrl: circlepng,
      netUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.pc6.com%2Fup%2F2013-8%2F201382614936.jpg&refer=http%3A%2F%2Fwww.pc6.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628415312&t=3cf507f5bb1a7e73203ba66e2a93f0a9"
    };
  }
};
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url(../assets/2zrdI1g.jpg);
  -webkit-font-smoothing: antialiased;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 50%;
  height: 80%;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bg-purple {
  background: #f6fafa;
}
.bg-purple-light {
  background: #e2e6e6;
}
.grid-content {
  border-radius: 4px;
  height: 700px;
}
.bg-black {
  background: black;
}

.el-menu {
  width: 77px;
  background: black;
  padding-left: 2px;
  
}

.el-input__inner {
  background-color: #f56c6c;
}
</style>
